<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import img from '../../assets/one.png'
import img1 from '../../assets/two.png'
import img2 from '../../assets/three.png'
import { Get_phone } from '../../api/index'
import { useRouter } from 'vue-router';
const lefts = reactive(
    {
        name: '范冰冰',
        imgs: 'https://p.qqan.com/up/2021-7/20217291017506376.jpg',
        mobile: 13521465895,
        address: '长江路105号东50米'
    }
);

const rights = reactive(
    {
        name: '刘亦菲',
        imgs: 'https://tupian.qqw21.com/article/UploadPic/2020-6/20206302365369869.jpg',
        mobile: 13521465895,
        address: '长江路105号东50米'
    }
);
const cons = reactive(
    {
        name: '赵丽颖',
        imgs: 'https://p.qqan.com/up/2021-3/16149983072044904.jpg',
        mobile: 13521465895,
        address: '长江路105号东50米'
    }
)
//实例路由
const router = useRouter();
//调用接口参数
const currentPage = ref<any>('1');
const pageSize = ref<any>('20');
// 成功后拿到的数据
const dataList:any = ref([]);

onMounted(async () => {
    let res = await Get_phone(currentPage, pageSize)
    console.log(res, '=============>res');
    if (res.status === 200) {
        dataList.value = res.data.data

    }
    let daa = [];
    const xindata = dataList.value.sort((a: any, b: any) => {
        return b.lease_house - a.lease_house
    })
    dataList.value = xindata;
})




//点击跳转详情页
const toDetail = (data: any) => {
    const datas = JSON.stringify(data);
    router.push(`/detail?data=${datas}`)
}

//点击剩下经纪人跳转详情页
const ToDetail = (item: any) => {
    const newdata = dataList.value.find((i: any) => i.id === item.id);
    const datas = JSON.stringify(newdata);
    router.push(`/detail?data=${datas}`)

}
//页面回退
const Backe = () => {
    router.push('/')
}
//跳转到消息页面
const navmete = ()=>{
  router.push('/chat')
}
//跳转到电话页
const navPhone = ()=>{
  router.push('/phone');
}
</script>
<template>
    <div class="box">
        <header>
            <van-icon name="arrow-left" class="icon" @click="Backe" />
            经纪人
        </header>
        <main>
            <div class="top">
                <div class="top_1">
                    <van-icon name="search" size="25" color="#fff" class="sou" />
                    <input type="text" class="inps" placeholder="请输入需要查询的经纪人">
                </div>
                <div class="da">
                    <div class="top_2">
                        <div class="l" @click="toDetail(lefts)">
                            <img class="names" :src="lefts.imgs" alt="" style="width: 50px;
                            height: 50px; border-radius: 50px;">
                            <img :src="img1" alt="" class="img1">
                            <div class="zi"> {{ lefts.name }}</div>
                        </div>
                        <div class="con" @click="toDetail(cons)">
                            <img :src="img" alt="" class="img">
                            <div class="con_1">
                                <img style="width: 100%; height: 100%; border-radius: 70px;" :src="cons.imgs" alt="">
                            </div>
                            <div class="zi"> {{ cons.name }}</div>
                        </div>
                        <div class="r" @click="toDetail(rights)">
                            <img class="names" :src="rights.imgs" alt="" style="width: 50px;
                            height: 50px; border-radius: 50px;">
                            <img :src="img2" alt="" class="img1">
                            <div class="zi"> {{ rights.name }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="conent">
                <div class="conent_1" v-for="(item, index) in dataList" :key="index">
                    <div class="cl" @click="ToDetail(item)">
                        <span>
                            {{ index + 4 }}
                        </span>
                        <dl>
                            <dt>
                                <img src="https://tupian.qqw21.com/article/UploadPic/2020-5/202053023164011155.jpg" alt="">
                            </dt>
                            <dd>
                                <span class="s1">{{ item.name }}</span>
                                <span>{{ item.company }}</span>
                            </dd>
                        </dl>
                    </div>
                    <div class="cr">
                        <div class="icon">
                            <van-icon name="chat" size="25" color="#fa6368" @click="navmete" />
                        </div>
                        <div class="icon">
                            <van-icon name="phone" @click="navPhone" size="25" color="#fa6368" />
                        </div>

                    </div>
                </div>
            </div>
        </main>
    </div>
</template>

<style scoped lang="scss">
.box {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;

    header {
        width: 100vw;
        height: 50px;
        background-color: #2391f9;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        position: relative;

        .icon {
            position: absolute;
            top: 50%;
            left: 10%;
            transform: translate(-50%, -50%);
            cursor: pointer;
        }
    }

    main {
        flex: 1;
        overflow: auto;
        cursor: pointer;

        .top {
            width: 100%;
            height: 250px;
            background: url('https://img.zcool.cn/community/01a01b58b63b55a801219c77db14c5.jpg@2o.jpg') no-repeat;
            background-size: cover;
            box-sizing: border-box;
            overflow: hidden;

            .top_1 {
                width: 90%;
                height: 30px;
                margin: 0 auto;
                margin-top: 10px;
                background: rgba(255, 255, 255, .4);
                display: flex;

                .sou {
                    line-height: 30px;
                    margin-left: 10px;
                }

                .inps {
                    width: 80%;
                    height: 30px;
                    border: none;
                    outline: none;
                    background: none;
                    color: #fff;
                    margin-left: 5px;
                }

                .inps::placeholder {
                    color: #dfd9d9;
                }
            }

            .inps::placeholder {
                color: #dfd9d9;
            }
        }

        .da {
            width: 100vw;
            height: 210px;
            position: relative;

            .top_2 {
                width: 100vw;
                height: 150px;
                box-sizing: border-box;
                padding: 0 20px;
                display: flex;
                position: relative;
                position: absolute;
                bottom: 5px;
                left: 0;

                .names {
                    margin-left: 25px;
                    margin-top: 20px;
                }

                .zi {
                    width: 100%;
                    text-align: center;
                    margin-top: 15px;
                }

                .l {
                    width: 30%;
                    height: 75%;
                    background-color: #fff;
                    margin-top: 45px;
                    border-radius: 10px 10px 0 0;
                    position: relative;

                    .img1 {
                        width: 100%;
                        position: absolute;
                        top: 50px;
                        left: 50%;
                        transform: translate(-50%, 0);
                    }
                }

                .con {
                    width: 40%;
                    height: 100%;
                    background-color: #fff;
                    margin: 0 5px;
                    border-radius: 10px 10px 0 0;
                    position: relative;
                    margin-top: 5px;

                    .con_1 {
                        width: 80px;
                        height: 80px;
                        border-radius: 80px;
                        border: 3px solid yellow;
                        margin: 0 auto;
                        margin-top: 20px;
                    }

                    .img {
                        position: absolute;
                        top: 75px;
                        left: 50%;
                        transform: translate(-50%, 0);
                    }
                }

                .r {
                    width: 30%;
                    height: 75%;
                    background-color: #fff;
                    margin-top: 45px;
                    border-radius: 10px 10px 0 0;
                    position: relative;

                    .img1 {
                        width: 100%;
                        position: absolute;
                        top: 48px;
                        left: 50%;
                        transform: translate(-50%, 0);
                    }
                }
            }
        }

    }

    .conent {
        width: 100vw;
        overflow: hidden;

        .conent_1 {
            width: 100%;
            height: 80px;
            display: flex;
            border-bottom: 1px solid #ccc;
            margin-top: 15px;

            .cl {
                width: 70%;
                height: 100%;
                box-sizing: border-box;
                padding: 10px;
                display: flex;
                align-items: center;

                dl {
                    width: 80%;
                    margin-left: 5px;

                    dt {
                        width: 50px;
                        height: 50px;

                        img {
                            width: 100%;
                            height: 100%;
                            border-radius: 100%;
                        }

                        float: left;
                    }

                    dd {
                        line-height: 25px;

                        span {
                            display: block;
                            color: #aaa;
                            margin-left: 25px;
                        }

                        .s1 {
                            color: #000;
                            font-weight: bold;
                        }
                    }
                }
            }

            .cr {
                width: 30%;
                height: 100%;
                box-sizing: border-box;
                padding: 10px;
                display: flex;
                align-items: center;
                justify-content: center;

                .icon {
                    width: 30px;
                    height: 30px;
                    background-color: #fdeded;
                    border-radius: 30px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 15px;
                }
            }
        }
    }
}</style>